<template>
  <view class="room-page">
    <!-- scroll-into-view会自动滚动到id为xxx的元素这里 -->
    <scroll-view
      refresher-enabled
      refresher-background="#f2f2f2"
      scroll-y
      :scroll-into-view="scrollV"
      style="flex: 1; overflow: hidden"
    >
      <view class="message-container">
        <!-- 订单状态   1待支付2待接诊3咨询中4已完成5已取消 -->

        <!-- 优化: 封装一个无状态组件  <room-status :status="orderDetail.status"></room-status> -->

        <!-- <view v-if="orderDetail.status === 1">待支付</view>
    <view v-if="orderDetail.status === 2">待接诊</view>
    <view v-if="orderDetail.status === 3">咨询中</view>
    <view v-if="orderDetail.status === 4">已完成</view>
    <view v-if="orderDetail.status === 5">已取消</view> -->

        <room-status
          :status="orderDetail.status"
          :statusValue="orderDetail.statusValue"
          :countdown="orderDetail.countdown"
        ></room-status>

        <!-- 渲染消息列表 -->
        <!-- 每个消息都有id   拿到最后一条消息的id    item[msgList.length-1] -->
        <view v-for="(item, index) in msgList" :key="item.id" :id="`item${index}`">
          <!-- 
            消息本身需要根据msgType处理成不同的UI
          -->
          <!-- 31 32 33  提示消息   -->
          <view v-if="item.msgType === 31 || item.msgType === 32">
            <notify-info :type="item.msgType" :content="item.msg?.content"></notify-info>
          </view>
          <!-- 21 病情卡片 -->
          <view v-else-if="item.msgType === 21">
            <patient-info :info="item.msg?.consultRecord"></patient-info>
          </view>

          <view v-else-if="item.msgType === 1 || item.msgType === 4">
            <!-- 消息框 无状态组件 -->
            <message-info :msg="item"></message-info>
          </view>
          <!-- <view v-else-if="item.msgType === 4"> 图片消息</view> -->
          <view v-else-if="item.msgType === 22">
            <prescription-info :prescription="item.msg?.prescription"></prescription-info>
          </view>
          <view v-else>该消息类型暂未处理</view>
        </view>
      </view>
      <!-- <view id="xxx">123</view> -->
    </scroll-view>

    <!-- 发送消息 -->
    <view class="message-bar">
      <template v-if="true">
        <uni-easyinput
          :disabled="orderDetail.status !== 3"
          :clearable="false"
          :input-border="false"
          placeholder-style="font-size: 32rpx; color: #c3c3c5;"
          placeholder="问医生"
          v-model="content"
          @confirm="send"
        />
        <view class="image-button" @click="clickChooseImage">
          <uni-icons size="40" color="#979797" type="image"></uni-icons>
        </view>
      </template>
      <button v-else class="uni-button">咨询其它医生</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { orderDetailApi } from '@/apis/consult'
  import { useUserStore } from '@/stores/user'
  import type { OrderDetail } from '@/types/consult'
  import type { MsgItem, MsgData } from '@/types/room'
  import { request } from '@/utils/http'
  import { io } from 'socket.io-client'
  import type { Socket } from 'socket.io-client'
  import { nextTick } from 'vue'
  import { ref } from 'vue'
  const props = defineProps<{ orderId: string; payResult: string }>()
  console.log(props.orderId, props.payResult, 99999)

  // 消息滚动
  const scrollV = ref('xxx')

  if (props.payResult === 'true') {
    uni.showToast({
      title: '完成支付,稍等医生接单',
      icon: 'none',
    })
  }

  const store = useUserStore()
  // 建立socket链接
  // io('服务端地址wss', 配置对象) =>
  const socket: Socket = io('https://consult-api.itheima.net', {
    auth: { token: 'Bearer ' + store.user.token },
    query: { orderId: props.orderId },
    transports: ['websocket', 'polling'],
    timeout: 5000,
  })
  // 你怎么知道建立好了  => 监听事件
  socket.on('connect', () => {
    console.log('建立好了')
  })

  socket.on('error', (event) => {
    // 错误异常消息
    console.log('出现错误')
  })

  socket.on('disconnect', () => {
    // 已经断开连接
    console.log('断开连接')
  })

  // 这里还会监听很多事件 等待服务器发送消息

  // 获取默认聊天记录
  socket.on('chatMsgList', (res: MsgData) => {
    console.log(res.data)

    res.data!.forEach((item) => {
      // item 每一段消息
      // 每一段消息push之前  人为插入一条普通消息:  消息类型: 普通31   内容: 创建时间 => 每段消息都有一个时间段的提示
      msgList.value.push(
        { id: item.createTime, msgType: 31, msg: { content: item.createTime } },
        ...item.items!
      )
    })
  })

  // 获取订单状态 => 封装接口 封装类型

  const orderDetail = ref({} as OrderDetail)
  async function getDetail() {
    const res = await orderDetailApi(props.orderId)
    // console.log(res)
    orderDetail.value = res
  }

  getDetail() // 一进入聊天室  立即获取一次订单状态  不是实时的

  // 监听聊天室状态改变事件
  socket.on('statusChange', () => {
    console.log('聊天室状态改变')
    getDetail()
  })

  // 定义消息列表数组
  const msgList = ref<MsgItem[]>([])

  // 监听服务端的消息 receiveChatMsg
  socket.on('receiveChatMsg', (res: MsgItem) => {
    console.log('收到消息:', res)

    msgList.value.push(res)

    // 注意事项: 只有结构出来了  才能滚动到下方
    // 视图更新钩子(只要视图结构更新了 就会触发)   onLoad(() => {})  onShow(() => {})
    nextTick(() => {
      // 这里收到消息后   这里有最新的数组长度
      scrollV.value = `item${msgList.value.length - 1}`
    })
  })

  const content = ref('')

  //回车发送消息
  const send = () => {
    console.log(content.value)

    // 发送的消息有格式要求
    socket.emit('sendChatMsg', {
      // 当前登录用户的ID
      from: store.user.id,
      // 发给谁
      to: orderDetail.value?.docInfo?.id,
      // 消息类型  1
      msgType: 1,
      // 消息主体内容
      msg: {
        content: content.value,
      },
    }) // 约定好的事件名  将来服务端根据这个事件名收到消息   推送到两端

    content.value = ''
  }
  // 聊天业务=>本质:实时通信 => 事件驱动
  // socket是如何收到消息 => 监听事件  on
  // socket是如何发送消息 => 触发事件  emit

  // 发送图片消息的逻辑
  const clickChooseImage = async () => {
    // 1.选图片
    const res = await uni.chooseImage({
      count: 1, // 数量
      sizeType: ['original', 'compressed'], // 原图/压缩
      sourceType: ['album', 'camera'], // 可以相册/相机拍
    })
    console.log(res.tempFilePaths[0]) // 选中的图片地址

    // 2.上传图片
    const res2 = await request.upload<null, { id: string; url: string }>('/upload', {
      name: 'file',
      filePath: res.tempFilePaths[0],
    })
    console.log(res2)

    // 3.发送图片消息
    socket.emit('sendChatMsg', {
      from: store.user.id,
      to: orderDetail.value?.docInfo?.id,
      msgType: 4, // 图片消息
      msg: {
        // content: '1'
        picture: res2,
      },
    })
  }
</script>

<style lang="scss">
  @import './index.scss';
</style>
